<template>
  <div class="side-bar">
    <!-- 用户信息 -->
    <div class="user-info">
      <el-avatar :size="40" :src="userAvatar"></el-avatar>
      <span class="username">{{ username }}</span>
    </div>
    
    <!-- 功能按钮列表 -->
    <div class="function-buttons">
      <el-tooltip v-for="item in functionButtons" 
                  :key="item.name"
                  :content="item.label" 
                  placement="right">
        <div class="function-button" @click="handleFunction(item.name)">
          <i :class="item.icon"></i>
        </div>
      </el-tooltip>
    </div>
    
    <!-- 下课按钮 -->
    <div class="end-class-button" @click="handleEndClass">
      <i class="el-icon-switch-button"></i>
      <span>下课</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SideBar',
  data() {
    return {
      username: '张老师',
      userAvatar: '',
      functionButtons: [
        { name: 'courseware', label: '课件', icon: 'el-icon-folder' },
        { name: 'homework', label: '作业', icon: 'el-icon-notebook-1' },
        { name: 'analysis', label: '分析', icon: 'el-icon-data-analysis' },
        { name: 'whiteboard', label: '白板', icon: 'el-icon-edit' },
        { name: 'fullscreen', label: '全屏', icon: 'el-icon-full-screen' },
        { name: 'more', label: '更多', icon: 'el-icon-more' }
      ]
    }
  },
  methods: {
    handleFunction(name) {
      // 处理功能按钮点击
      console.log('点击功能：', name)
    },
    handleEndClass() {
      this.$confirm('确认要下课吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 处理下课逻辑
      })
    }
  }
}
</script>

<style scoped>
.side-bar {
  width: 80px;
  background: #2c3e50;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}

.function-buttons {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.function-button {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  font-size: 24px;
}

.function-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.end-class-button {
  margin-top: auto;
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
</style> 